<!--
 * @Description: text
 * @LastEditors: 蔡霸霸
 * @LastEditTime: 2021-02-28 18:09:52
-->
<template>
  <div class="dashboard-container">
    <ul class="top-box">
      <li class="card" v-for="(item, index) in list" :key="index">
        <p class="text">{{ item.title }}</p>
        <h5>
          {{ item.val }}
          <span v-show="item.title === '网站浏览总时长'">分钟</span>
        </h5>
      </li>
    </ul>
    <div class="bot-box">
      <div id="myChart"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMainData, getChartData } from "@/api";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"])
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async getData() {
      const { data } = await getMainData().catch(e => {
        console.log(e);
      });
      console.log(data);
      const { browseCount, videoBrowseCount, totalTimes } = data;
      this.list = [
        {
          title: "用户浏览总人数",
          val: browseCount
        },
        {
          title: "视频播放总量",
          val: videoBrowseCount
        },
        {
          title: "网站浏览总时长",
          val: totalTimes
        }
      ];
    },
    async initChart() {
      const { data } = await getChartData();
      /* const list = [
        { date: "2021-02-23", count:1 },
        { date: "2021-02-24", count: 2 },
        { date: "2021-02-25", count: 4 },
        { date: "2021-02-26", count: 6 },
        { date: "2021-02-27", count: 8 },
        { date: "2021-02-28", count: 6 },
        { date: "2021-02-29", count: 3 }
      ]; */
      console.log(data);
      const date = [],
        count = [];
      data.forEach(e => {
        date.push(e.date);
        count.push(e.count);
      });
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      const option = {
        title: {
          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: "播放数量", //主标题文本，'\n'指定换行
          link: "", //主标题文本超链接,默认值true
          target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
          x: "left", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textAlign: null, //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
          backgroundColor: "rgba(0,0,0,0)", //标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: "#ccc", //标题边框颜色,默认'#ccc'
          borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
          padding: [10, 0, 0, 88], //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 10, //主副标题纵向间隔，单位px，默认为10
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: "Arial, Verdana, sans...",
            fontSize: 12,
            fontStyle: "normal",
            fontWeight: "normal"
          },
          zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6 //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          width: "auto" //图例宽度
        },
        xAxis: {
          type: "category",
          data: date
        },
        yAxis: {
          type: "value",
          min: 0,
          minInterval: 1
        },
        series: [
          {
            data: count,
            type: "line"
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.dashboard {
  &-container {
    width: 100%;
    height: 100%;
    .top-box {
      height: 50%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
      .card {
        height: 200px;
        width: 48%;
        margin: 20px 1%;
        background: #f5f9fc;
        border-radius: 6px;
        padding: 30px 40px;
        p {
          margin: 0;
          font-size: 16px;
          color: #a6a8a7;
          margin: 10px 0;
          span {
            margin-left: 80px;
            color: #13aec4;
            i {
              margin-right: 10px;
            }
          }
        }
        h5 {
          margin: 10px;
          color: #13aec4;
          font-size: 60px;
          span {
            font-size: 16px;
            color: #a6a8a7;
          }
        }
      }
    }
    .bot-box {
      height: 400px;
      width: 100%;
      padding: 30px;
      #myChart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
